<template>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 50]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      :pager-count="7"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #total>
        共 <span class="total-count">{{ total }}</span> 条
      </template>
    </el-pagination>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  page: {
    type: Number,
    required: true
  },
  size: {
    type: Number,
    required: true
  },
  total: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update:page', 'update:size'])

const currentPage = computed({
  get: () => props.page,
  set: (val) => emit('update:page', val)
})

const pageSize = computed({
  get: () => props.size,
  set: (val) => emit('update:size', val)
})

const handleSizeChange = (val) => {
  emit('update:size', val)
}

const handleCurrentChange = (val) => {
  emit('update:page', val)
}
</script>

<style lang="scss" scoped>
.pagination-container {
  padding: 20px 0;
  display: flex;
  justify-content: flex-end;

  :deep(.el-pagination) {
    .total-count {
      color: #409eff;
      font-weight: bold;
      margin: 0 4px;
    }

    button {
      &:disabled {
        background-color: #f5f7fa;
      }
    }

    .el-pager {
      li {
        &.active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
}
</style> 